<template>
  <div>
    <!-- <xy-table ref="xy-table" :columns="columns" :api="api" :param="form">
      <template slot="addItem">
        <div class="header">
          <el-form :inline="true" ref="form" :model="form" size="mini">
            <el-form-item>
              <select-service v-model="form.Service"></select-service>
            </el-form-item>
            <el-form-item>
              <select-merchantid v-model="form.MID"></select-merchantid>
            </el-form-item>
            <el-form-item>
              <select-date v-model="form.BeginDate"></select-date>
            </el-form-item>
            <el-form-item>
              <select-date v-model="form.EndDate"></select-date>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" size="small">{{
                $language.local("Search")
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </xy-table> -->
    <div class="header">
      <el-form :inline="true" ref="form" :model="form" size="mini">
        <el-form-item class="btn">
          <el-button
            icon="el-icon-plus"
            type="default"
            @click="toPayDetail"
            size="mini"
            >{{ $language.local("Recharge") }}</el-button
          >
        </el-form-item>
        <el-form-item>
          <select-service v-model="form.Service"></select-service>
        </el-form-item>
        <el-form-item>
          <select-merchantid v-model="form.MID"></select-merchantid>
        </el-form-item>
        <el-form-item>
          <select-date v-model="form.BeginDate"></select-date>
        </el-form-item>
        <el-form-item>
          <select-date v-model="form.EndDate"></select-date>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="onSearch" size="mini">{{
            $language.local("Search")
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      class="el-table"
      ref="multipleTable"
      id="data"
      :data="tableData"
      border
      stripe
      size="mini"
    >
      <template v-for="(value, key) in columns">
        <template v-if="key == 'RechargeStatus'">
          <el-table-column
            :key="key"
            align="center"
            prop="RechargeStatusName"
            :label="$language.local(key)"
            :filters="statusFilters"
            :filter-multiple="false"
            :filter-method="statusChange"
          ></el-table-column>
        </template>
        <template v-else-if="key == 'ServiceName'">
          <el-table-column
            :key="key"
            align="center"
            prop="RechargeStatusName"
            :label="$language.local(key)"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>
                  {{ $language.local("ServiceBank") }}:
                  {{ scope.row.ServiceBank }}
                </p>
                <p>
                  {{ $language.local("ServiceAccountNo") }}:
                  {{ scope.row.ServiceAccountNo }}
                </p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.ServiceName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </template>
        <template v-else-if="key == 'RechargeAmount'">
          <el-table-column
            :key="key"
            align="center"
            :prop="key"
            :label="$language.local('充值明细')"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>
                  {{ $language.local("RechargeAmount") }}:
                  {{ scope.row.RechargeAmount }}
                </p>
                <p>
                  {{ $language.local("AccountAmount") }}:
                  {{ scope.row.AccountAmount }}
                </p>
                <p>
                  {{ $language.local("RechargeRate") }}:
                  {{ scope.row.RechargeRate }}
                </p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.RechargeAmount }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </template>

        <template v-else-if="key == 'RechargeTime'">
          <el-table-column
            :key="key"
            align="center"
            :prop="key"
            :label="$language.local(key)"
            :filters="dateFilters"
            :filter-method="beginDateChange"
            :filter-multiple="false"
          >
            <template slot-scope="scope">
              <div>
                <i v-if="scope.row[key]" class="el-icon-date"></i>
                <span>{{ converDate(scope.row[key]) }}</span>
              </div>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          v-else
          :key="key"
          align="center"
          :prop="key"
          :label="$language.local(key)"
        ></el-table-column>
      </template>
      <el-table-column
        :label="$language.local('操作')"
        width="126"
        align="center"
      >
        <template slot-scope="scope">
          <el-row class="center">
            <el-col :span="8" class="center">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$language.local('修改')"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  size="mini"
                  circle
                  icon="el-icon-edit"
                  @click="editItem(scope.row)"
                ></el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="8" class="center">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$language.local('删除')"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  circle
                  @click="deleteItem(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </el-col>
            <el-col :span="8" class="center">
              <el-tooltip
                class="item"
                effect="dark"
                :content="$language.local('审核')"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="warning"
                  size="mini"
                  icon="el-icon-s-check"
                  circle
                  @click="onCheck(scope.row)"
                >
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import API from "../../plugins/api";

export default {
  name: "payroll",

  data() {
    return {
      tableData: [],
      param: {},
      statusFilters: [
        {
          text: "待确认",
          value: "1",
        },
        {
          text: "已确认待复核",
          value: "2",
        },
        {
          text: "已复核",
          value: "3",
        },
        {
          text: "无效充值",
          value: "4",
        },
      ],
      dateFilters: [
        {
          text: "本周",
          value: "2020-2-1",
        },
        {
          text: "本月",
          value: "2020-2-2",
        },
        {
          text: "本季",
          value: "2020-2-3",
        },
        { text: "本年", value: "2020-2-4" },
      ],
      merchantFilters: [
        { text: "1公司", value: "1" },
        { text: "2公司", value: "2" },
      ],
      ServiceID: 123,
      api: new API("/api/recharge/"),

      columns: {
        MID: 127,
        // BusinessOrderNo: "B20210602165304",
        ServiceName: "湖南好捷科技有限公司",
        //  Indate: "2021-06-02T16:54:05.673",
        RechargeTime: "2021-06-02T16:53:04",
        RechargeAmount: 100,
        RechargeStatus: 2,
        refundStatus: 0,
        // refundLockStatus: 0,
        // Note: "费用说明  \t",
        // RecordType: "手工录入",
        // CustomerNumber: null,
        // CustomerName: null,
        // AgentName: null,
        // PayingBankName: "100",
        // SalesOf: null,

        // AddUser: "高雄",
        // CheckUser: null,
        // CheckDate: "0001-01-01T00:00:00",
        // PayChannelId: 15,
        // ServiceProviderName: "湖南好捷科技有限公司",

        // BankSerialNumber: null,
        // PayingBank: null,
        // PayingAccountName: "",
        // PayingAccount: "付款账户",
        // AccountingTime: "2021-06-02",
        // ruleType: "A",
      },
      services: [],
      form: {
        Service: "",
        RechargeStatus: "",
        BeginDate: new Date(
          new Date() - 3600 * 1000 * 24 * 30
        ).toLocaleDateString(),
        EndDate: new Date().toLocaleDateString(),
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let response = await this.$http.get("/api/recharge/GetList", this.form);
      console.log(response);
      this.tableData = response.data.Data;
    },
    converDate(dateStr) {
      if (dateStr) {
        let date = new Date(dateStr).toLocaleDateString();
        return date == "Invalid Date" ? dateStr : date;
      } else {
        return "";
      }
    },
    onSearch() {
      this.param = this.form;
      // this.param.BeginDate = this.param.date[0].toLocaleDateString();
      // this.param.EndDate = this.param.date[1].toLocaleDateString();
      console.log(this.param);
      // this.$refs["xy-table"].getData(this.param);
    },
    beginDateChange(value, row, column) {
      console.log(value, row, column);
    },
    statusChange(value, row, column) {
      console.log(value, row, column);
    },
    toPayDetail() {
      this.$router.push("/pay-detail");
    },
  },
};
</script>

<style lang="less" scoped>
.label {
  height: 100%;
}
.line {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-form {
  display: flex;
  justify-content: flex-start;
  .el-form-item {
    flex: 3;
    &.btn {
      flex: 1;
    }
  }
}
</style>
